Why

Make adoption easier.

What

Codemod to upgrade Button v1/v2 and IconButton v1/v2 to Button v3 or LinkButton v3

Assumptions:

• label should always exist, and become children
• children should not already exist (always a self-closing element)

Props:

• onClick → onPress
• label → children (self-closing → open/close element)
  • Examples of different types of label usage:
    • "Actions"
    • {"Actions for section" // TODO: i18n}
    • {"Back to Main Menu"}
    • {`Further options for ${track.name}`}
    • { showEmojiPicker ? formatMessage({ id: "liteRTE.emojiPickerLabel.close", defaultMessage: "Close emoji picker", description: "Label for the button that closes the emoji picker", }) : formatMessage({ id: "liteRTE.emojiPickerLabel.open", defaultMessage: "Open emoji picker", description: "Label for the button that opens the emoji picker", }) }
    • {label}
• Update variants
  • Default (undefined):
    • Button -> variant secondary
    • IconButton -> variant tertiary
  • primary → variant primary
  • secondary → variant tertiary
  • destructive → delete
• Update size
  • regular → large
  • small → medium
  • There is a usage of size={size} which would likely have a TS error - leave as is
• reversed → isReversed
• classNameOverride → className
• data-automation-id → data-testid
• disabled → isDisabled
• newTabAndIUnderstandTheAccessibilityImplications → target="_blank"
  • Also add rel="noopener noreferrer"
• IconButton only:
  • Add hasHiddenLabel

Component name:

• IconButton (v1/v2) without href or component → Button (v3)
• IconButton (v1/v2) with href → LinkButton
• IconButton (v1/v2) with component → LinkButton
• Button (v1/v2) without href or component → Button (v3)
• Button (v1/v2) with href → LinkButton
• Button (v1/v2) with component → LinkButton

Imports:

• From:
  • @kaizen/components
  • @kaizen/components/v1/actions
  • @kaizen/components/v2/actions
• To:
  • @kaizen/components/v3/actions
• IconButton may be aliased - use alias
• Button may be aliased - use alias
• Button (v3) not imported - add import
• Button (v3) may already be used
  • Do not add an additional import
  • Button may be aliased - use alias